<template>
    <div class="inOut-stock-warp">
        <h3>评估等级占比图</h3>
        <div ref="inOutStock" style="width:100%;height:100%;">

        </div>
    </div>
</template>

<script>
    let echarts = require('echarts');

    export default ({
        props: {
            location: {type: String, default: ""},
            schoolType: {type: String, default: ""}
        },
        // props: ['json'],
        data() {
            return {json: []}
        },
        watch: {
            location(val) {
                this.query_click()
            },
            schoolType(val) {
                this.query_click()
            }
        },
        mounted() {
            this.query_click();
        },
        methods: {
            query_click() {
                this.$http.post("/stastics/level", {
                    location: this.location,
                    schoolType: this.schoolType
                }).then(res => {
                    var json = res.data.data;

                    this.json = json.map(it => {
                        return {name: it.level, value: it.percent}
                    });//.sort((a, b) => a[1] - b[1])
                    this.drawChart(this.json);
                })
            },
            // json: key:学校名， value:分值。
            drawChart(json) {
                var min = Object.values(json.map(it => it[1])).min();
                var max = Object.values(json.map(it => it[1])).max();
                var distance = max - min;
                var minValue = parseInt(min / 10) * 10;
                if (distance == 0) {
                    min = min - 1;
                }

                var data = json.map(it => {
                    return [((it[1] - min) * 100 / distance).ToRound(), it[1], it[0]]
                });

                var option = {

                    tooltip: {
                        trigger: 'item',
                        formatter: '{a} <br/>{b} : {c} ({d}%)'
                    },

                    series: [
                        {
                            name: "等级",
                            type: 'pie',
                            radius: '85%',
                            data: this.json,
                            emphasis: {
                                itemStyle: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            }
                        }
                    ]
                };


                console.log(option);
                var myChart = echarts.init(this.$refs.inOutStock);
                myChart.setOption(option);
            }
        }
    })
</script>

<style scoped>
    .inOut-stock-warp {
        width: 100%;
        height: 100%;
        margin-top: 20px;
    }

    h3 {
        margin-left: 20px;
        display: flex;
    }

    h3:before {
        content: " ";
        display: block;
        width: 6px;
        background-color: #5B9BD5;
        margin-right: 10px;
    }


</style>
